// 用来定义路由表
// import Home from './pages/Home'
// import About from './pages/About'
// import News from './pages/News'
// import Message from './pages/Message'
// import Detail from './pages/Detail'
// import Unknow from './pages/404'
import React, { lazy, Suspense } from 'react'
// Navigate组件,相当于就是一个重定向的组件.只要解析Navigate就会直接重定向
import { Navigate } from 'react-router-dom'
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Detail = React.lazy(() => import('./pages/Detail'))
const Unknow = React.lazy(() => import('./pages/404'))

// 每一个人要懒加载的组件,都要被Suspense包裹,所以直接封装函数
function fallback(Com) {
  return (
    <Suspense
      fallback={
        <div style={{ fontSize: 30, color: 'red' }}>正在加载,请稍后</div>
      }
    >
      <Com></Com>
    </Suspense>
  )
}

export default [
  {
    path: 'home',
    element: fallback(Home),
    children: [
      {
        path: 'news',
        element: fallback(News),
      },
      {
        path: 'message',
        element: fallback(Message),
        children: [
          {
            path: 'detail/:id',
            element: fallback(Detail),
          },
        ],
      },
    ],
  },
  {
    path: 'about',
    element: fallback(About),
  },
  {
    path: '404',
    element: fallback(Unknow),
  },
  {
    path: '*',
    element: <Navigate to="/404"></Navigate>,
  },
]
